<script setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
const props = defineProps({
  userId: Number
})

const friendApplys = reactive({})

const groupApplys = reactive({})

const ip1 = 'localhost'

const ip2 = '47.120.69.214'

const baseUrl = 'https://' + ip2 + ':8787'

onMounted(() => {
  getFriendApply()
  getGroupApply()
})

function getFriendApply() {
  axios({
    url: baseUrl + '/friendApply/getByUserID',
    method: 'get',
    params: {
      'userId': props.userId
    }
  })
    .then(response => response.data)
    .then(data => {
      handleTime(data)
      friendApplys.value = data
      console.log(data);
    })
}

function getGroupApply() {
  axios({
    url: baseUrl + '/groupApply/getApplyOfMyGroup',
    method: 'get',
    params: {
      'userId': props.userId
    }
  })
  .then(response => response.data)
  .then(data => {
    handleTime(data)
      groupApplys.value = data
  })
}

function handleTime(data) {
  for (let i = 0; i < data.length; i++) {
    let apply = data[i]
    apply['applyTime'] = new Date(apply['applyTime'])
    console.log(apply['applyTime']);
    let month = (apply['applyTime'].getMonth() + 1).toString()
    let date = (apply['applyTime'].getDate()).toString()
    apply['applyTime'] = month + "月" + date + '日'
  }
}

function acceptFriendApply(index) {
  let applyId = friendApplys.value[index].id
  axios({
    url: baseUrl + '/friendApply/acceptApply',
    method: 'get',
    params: {
      'applyId': applyId
    }
  })
  .then(response => response.data)
  .then(data => {
    if(data) {
      friendApplys.value[index].status = '已同意'
    }
  })
}

function refuseFriendApply(index) {
  let applyId = friendApplys.value[index].id
  axios({
    url: baseUrl + '/friendApply/refuseApply',
    method: 'get',
    params: {
      'applyId': applyId
    }
  })
  .then(response => response.data)
  .then(data => {
    if(data) {
      friendApplys.value[index].status = '已拒绝'
    }
  })
}

function acceptGroupApply(index) {
  let applyId = groupApplys.value[index].id
  axios({
    url: baseUrl + '/groupApply/acceptApply',
    method: 'get',
    params: {
      'applyId': applyId
    }
  })
  .then(response => response.data)
  .then(data => {
    if(data) {
      groupApplys.value[index].status = '已同意'
    }
  })
}

function refuseGroupApply(index) {
  let applyId = groupApplys.value[index].id
  axios({
    url: baseUrl + '/groupApply/refuseApply',
    method: 'get',
    params: {
      'applyId': applyId
    }
  })
  .then(response => response.data)
  .then(data => {
    if(data) {
      groupApplys.value[index].status = '已拒绝'
    }
  })
}

</script>

<template>
  <div class="common-layout" style="width:100%">
    <el-tabs type="border-card" style="width:100%">
      <el-tab-pane label="好友申请">
        <div >
          <el-table :data="friendApplys.value" style="width: 100%">
            <el-table-column prop="user1Name" label="申请人"/>
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="applyTime" label="时间"  />
            <el-table-column prop="status" label="状态"/>
            <el-table-column label="操作" >
              <template #default='scope'>
                <div v-if="friendApplys.value[scope.$index].status == '待处理'">
                  <el-button type="primary" size="default" @click="acceptFriendApply(scope.$index)">同意</el-button>
                  <el-button type="danger" size="default" @click="refuseFriendApply(scope.$index)">拒绝</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="群聊申请">
        <div >
          <el-table :data="groupApplys.value" style="width: 100%;">
            <el-table-column prop="userName" label="申请人"  />
            <el-table-column prop="groupName" label="申请加入的群聊"  />
            <el-table-column prop="content" label="内容"  />
            <el-table-column prop="applyTime" label="时间"  />
            <el-table-column prop="status" label="状态"  />
            <el-table-column label="操作">
              <template #default='scope'>
                <div v-if="groupApplys.value[scope.$index].status == '待处理'">
                  <el-button type="primary" size="default" @click="acceptGroupApply(scope.$index)">同意</el-button>
                  <el-button type="danger" size="default" @click="refuseGroupApply(scope.$index)">拒绝</el-button>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>